<template>
  <div>
    <el-row>
      <el-col :span="24">
        <center><h3>图文详解</h3></center>
      </el-col>
    </el-row>
    <el-row style="margin-top:15px">
      <el-col :span="24">
        <el-table :data="result.data" border style="width: 100%;" :height="tableHeigh" v-loading="isLoading" element-loading-text="查询中，请稍候..." >
          <el-table-column prop="id" label="id" width="120" align="center"></el-table-column>
          <el-table-column label="日期" width="140" align="center">
            <template scope="scope">
              {{ new Date(scope.row.date).format('yyyy-MM-dd') }}
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="200" align="center">
            <template scope="scope">
              {{ scope.row.content.title }}
            </template>
          </el-table-column>
          <el-table-column label="送达人数" width="120" align="center">
            <template scope="scope">
              {{ scope.row.content.songDaRenShu }}
            </template>
          </el-table-column>
          <el-table-column label="图文阅读" width="120" align="center">
            <template scope="scope">
              {{ scope.row.content.tuWenZongShu }}
            </template>
          </el-table-column>
          <el-table-column label="原谅阅读" width="120" align="center">
            <template scope="scope">
              {{ scope.row.content.yuanWenZongShu }}
            </template>
          </el-table-column>
          <el-table-column label="分享收藏" width="120" align="center">
            <template scope="scope">
              {{ scope.row.content.zhuanFaShouCangZongShu }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" width="120" align="center"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template scope="scope">
              <el-button size="mini" type="primary" class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
              <el-button size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:center; margin-top: 5px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="result.page"
            :page-size="result.num"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[20, 50, 100, 200]"
            :total="result.count">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <tw-edit v-model="editVisible" :role="row"></tw-edit>
  </div>
</template>

<script type="text/javascript">
  import { mapGetters } from 'vuex'
  import twEdit from './tw0001-edit.vue'

  export default {
    computed: {
      ...mapGetters(['getWindowsHeight']),
      tableHeigh () {
        return this.getWindowsHeight - 220;
      }
    },
    data () {
      return {
        result: {
          count: 0,
          num: 20,
          page: 1,
          total: 0,
          data: []
        },
        isLoading: false,
        editVisible: false,
        row: {}
      }
    },
    mounted (){
      this.search();
    },
    methods: {
      async search () {
        let data = await this.$api.call({
          service: 'alysisList',
          body: {
            page: this.result.page,
            num: this.result.num
          },
          load: {
            context: this,
            name: 'isLoading'
          }
        });
        console.log(data);
        this.$set(this, 'result', data);
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`);
        this.result.num = val
        this.search();
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`);
        this.result.page = val
        this.search();
      },
      handleEdit (index, row) {
        this.editVisible = true;
        this.$set(this, 'row', row);
      },
      handleDelete (index, row) {

      }
    },
    components: {
      twEdit
    }
  }
</script>